<template>
    <div v-if="true">
        <div v-for="item in ordersList" :key="item.orderId" class="order-list-box" >
            
            <div class="display-flex">
                <div class="order-img">
                    <img :src="thumbnail" />
                </div>
                <div class="order-info">
                    <div class="font-14-333">{{ item.ResOrderGoods.GoodsName }}</div>
                </div>
                <div class="order-number-price">
                    <div class="font-12-666 text-r width">x{{ item.ResOrderGoods.GoodNum }}</div>
                    <div class="font-18-333 mt20 text-r width">¥{{ item.ResOrder.Price }}</div>
                </div>
            </div>
            <div class="display-flex">
                <div class="order-number-box">订单编号:1111</div>
                <div class="operation-box">
                    已支付
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ExtractPropTypes, inject } from 'vue';
import { useRouter } from 'vue-router';
import { getOrderDelete } from '@/api/api.query.util'
import { createOrder } from '@/api/api.query.util';
import { ElMessage } from 'element-plus';
const router = useRouter();
const currentRouteData = router.currentRoute.value;
const thumbnail = require('@/assets/image/huawei.jpg');

const inject1: any = inject('reload');
const props: ExtractPropTypes<{
    ordersList: Array;
}> = defineProps({
    ordersList: {
        type: Array,
        default: [],
    },
});
function lacking() {
    inject1();
}
</script>

<style scoped>
.order-list-box {
    padding: 15px 30px;
    background-color: #ffffff;
    margin-bottom: 20px;
}

.order-status {
    width: 100%;
    height: 16px;
}

.font-16-333 {
    color: #333333;
    font-size: 16px;
}
.font-16-333 > span {
    color: #3ab0a2;
}

.font-14-333 {
    color: #333333;
    font-size: 14px;
}

.font-12-333 {
    color: #333333;
    font-size: 12px;
}

.font-18-333 {
    color: #333333;
    font-size: 18px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.display-flex {
    display: flex;
}

.font-12-3ab0a2 {
    color: #3ab0a2;
    font-size: 12px;
}

.font-12-666 {
    color: #666666;
    font-size: 12px;
}

.order-img {
    padding: 15px 0;
}
.order-img img {
    height: 60px;
    width: 60px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.text-r {
    text-align: right;
}

.text-l {
    text-align: left;
}

.width-50 {
    width: 50px;
}

.specifications-box {
    order-radius: 4px;
    border: solid 1px #3ab0a2;
    line-height: 14px;
    padding: 0 6px;
}

.m-r-15 {
    margin-right: 15px;
}

.order-number-box {
    color: #333333;
    font-size: 12px;
    width: 400px;
    line-height: 32px;
}

.operation-box {
    width: calc(100% - 400px);
    text-align: right;
}

.order-info {
    padding: 15px;
    width: calc(100% - 110px);
}

.order-number-price {
    width: 100px;
    padding: 15px 0;
}
</style>
